{% extends "app/base_site.html" %}

{% block title %} 系统授权 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
  <style>
    .auth-container {
      padding: 20px;
      background: #f5f7fa;
      min-height: calc(100vh - 100px);
    }
    
    .modern-card {
      background: white;
      border-radius: 8px;
      padding: 20px 24px;
      margin: 0 auto 16px;
      max-width: 900px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }
    
    .modern-card:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eef2f5;
    }
    
    .card-header i {
      margin-right: 8px;
      color: #169F85;
      font-size: 16px;
    }
    
    .card-header h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .info-row {
      display: flex;
      align-items: center;
      padding: 5px 8px;
      margin-bottom: 3px;
      background: #f9fafb;
      border-radius: 4px;
      transition: all 0.2s;
    }
    
    .info-row:hover {
      background: #f3f4f6;
    }
    
    .info-label {
      font-size: 12px;
      color: #6b7280;
      min-width: 80px;
      font-weight: 500;
    }
    
    .info-value {
      font-size: 12px;
      color: #374151;
      font-weight: 500;
      flex: 1;
    }
    
    .status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 500;
    }
    
    .status-success {
      background: #d1fae5;
      color: #065f46;
    }
    
    .status-error {
      background: #fee2e2;
      color: #991b1b;
    }
    
    .status-warning {
      background: #fef3c7;
      color: #92400e;
    }
    
    .form-group-modern {
      margin-bottom: 16px;
    }
    
    .form-label-modern {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: #606266;
      margin-bottom: 6px;
    }
    
    .form-label-modern .required {
      color: #dc2626;
      margin-left: 4px;
    }
    
    .form-control-modern {
      width: 100%;
      padding: 8px 12px;
      font-size: 13px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      transition: all 0.2s;
      resize: vertical;
      font-family: Consolas, Monaco, monospace;
    }
    
    .form-control-modern:focus {
      outline: none;
      border-color: #169F85;
      box-shadow: 0 0 0 2px rgba(22, 159, 133, 0.1);
    }
    
    .btn-modern {
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      margin-right: 8px;
    }
    
    .btn-primary-modern {
      background: linear-gradient(135deg, #169F85 0%, #14b89a 100%);
      color: white;
    }
    
    .btn-primary-modern:hover {
      box-shadow: 0 3px 8px rgba(22, 159, 133, 0.3);
      transform: translateY(-1px);
    }
    
    .btn-secondary-modern {
      background: white;
      color: #169F85;
      border: 1px solid #169F85;
    }
    
    .btn-secondary-modern:hover {
      background: #f0f9f6;
    }
    
    .btn-default-modern {
      background: white;
      color: #606266;
      border: 1px solid #dcdfe6;
    }
    
    .btn-default-modern:hover {
      color: #169F85;
      border-color: #169F85;
      background: #f0f9f6;
    }
    
    .loading-spinner {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid #e5e7eb;
      border-top: 2px solid #3b82f6;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 5px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .right_col {
      background: #f5f7fa !important;
    }
    
    .icon-key {
      color: #169F85;
    }
    
    .icon-lock {
      color: #14b89a;
    }
    
    .auth-info-card {
      background: #fafafa;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      padding: 12px;
      margin-bottom: 16px;
    }
    
    .auth-info-header {
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
    }
    
    .dongle-info-card {
      background: #fafafa;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      padding: 12px;
    }
    
    .dongle-info-header {
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
    }
    
    .section-title {
      font-size: 13px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 8px;
      padding-left: 8px;
      border-left: 3px solid #169F85;
    }
  </style>
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">
    <div class="auth-container">
      <div class="row">
        <div class="col-md-12">
          <!-- 系统授权卡片 -->
          <div class="modern-card">
            <div class="card-header">
              <!--<i class="fa fa-info-circle icon-info"></i>-->
              <h3>系统授权</h3>
              <span id="top_loading" style="margin-left: auto; display: none;">
                <span class="loading-spinner"></span>
                <span style="color: #667eea;">加载中...</span>
              </span>
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="info-row">
                  <span class="info-label">本机MAC地址</span>
                  <span class="info-value" id="machine_mac">...</span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="info-row">
                  <span class="info-label">软件标记</span>
                  <span class="info-value">{{ info.project_flag }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 授权码激活卡片 -->
          <div class="modern-card">
            <div class="card-header">
              <i class="fa fa-key icon-key"></i>
              <h3>授权码管理</h3>
            </div>
            
            <form method="post" data-parsley-validate>
              <div class="form-group-modern">
                <label class="form-label-modern">
                  授权码输入
                  <span class="required">*</span>
                </label>
                <textarea 
                  id="ac_active_code" 
                  name="active_code" 
                  class="form-control-modern" 
                  rows="3" 
                  placeholder="请输入授权码"></textarea>
              </div>

              <!-- 授权码状态信息 -->
              <div class="auth-info-card">
                <div class="auth-info-header">
                  <i class="fa fa-info-circle" style="margin-right: 4px;"></i>授权码状态：
                  <!--<span id="ac_status" class="status-badge status-error">未授权</span>-->
                  <span id="ac_status" class="status-badge">未授权</span>
                </div>
                
                <div class="row">
                  <div class="col-md-6">
                    <div class="info-row">
                      <span class="info-label">生效时间</span>
                      <span class="info-value" id="create_date">无</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">过期时间</span>
                      <span class="info-value" id="expire_date">无</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">有效时长</span>
                      <span class="info-value" id="expire_hour">无</span>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="info-row">
                      <span class="info-label">绑定MAC</span>
                      <span class="info-value" id="ac_mac">无</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">绑定标记</span>
                      <span class="info-value" id="ac_flag">无</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">备注信息</span>
                      <span class="info-value" id="ac_remark">无</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 激活按钮 -->
              <div style="padding-top: 16px; border-top: 1px solid #eef2f5; display: flex; justify-content: space-between; align-items: center;">
                <div>
                  {% if settings.auth_online_link != "" %}
                    <button type="button" onclick="f_link('{{ settings.auth_online_link }}')" class="btn-modern btn-default-modern">
                      <i class="fa fa-external-link"></i> 申请试用
                    </button>
                  {% endif %}
                  {% if settings.auth_buy_link != "" %}
                    <button type="button" onclick="f_link('{{ settings.auth_buy_link }}')" class="btn-modern btn-secondary-modern">
                      <i class="fa fa-shopping-cart"></i> 购买授权
                    </button>
                  {% endif %}
                </div>
                <button type="submit" class="btn-modern btn-primary-modern">
                  <i class="fa fa-check-circle"></i> 激活授权码
                </button>
              </div>
            </form>
          </div>

          <!-- 加密锁管理卡片 -->
          <div class="modern-card">
            <div class="card-header">
              <i class="fa fa-lock icon-lock"></i>
              <h3>加密锁管理</h3>
            </div>
            
            <div class="dongle-info-card">
              <div class="dongle-info-header">
                <i class="fa fa-shield" style="margin-right: 4px;"></i>加密锁状态：
                <!--<span id="dongle_status" class="status-badge status-error">未授权</span>-->
                <span id="dongle_status" class="status-badge">未授权</span>
              </div>
              <div class="info-row">
                <span class="info-label">备注信息</span>
                <span class="info-value" id="dongle_remark">无</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script>
    let ele_top_loading = $("#top_loading");
    let eleMachineMac = $("#machine_mac");
    let eleAcStatus = $("#ac_status");
    let eleAcActiveCode = $("#ac_active_code");
    let eleAcMac = $("#ac_mac");
    let eleAcFlag = $("#ac_flag");
    let eleAcRemark = $("#ac_remark");
    let eleExpireHour = $("#expire_hour");
    let eleCreateDate = $("#create_date");
    let eleExpireDate = $("#expire_date");
    let eleDongleStatus = $("#dongle_status");
    let eleDongleRemark = $("#dongle_remark");

    function f_link(url) {
      window.open(url);
    }

    function f_showAcInfo(status, mac, flag, remark, expire_hour, create_date_str, expire_date_str) {
      let statusMsg;
      if (-2 === status) {
        statusMsg = "<span class='status-badge status-error'>未授权</span>";
      } else if (-1 === status) {
        statusMsg = "<span class='status-badge status-error'>格式不正确</span>";
      } else if (0 === status) {
        statusMsg = "<span class='status-badge status-warning'>已过期</span>";
      } else if (1 === status) {
        statusMsg = "<span class='status-badge status-success'>已授权</span>";
      } else {
        statusMsg = "<span class='status-badge status-error'>授权失败</span>";
      }
      eleAcStatus.html(statusMsg);

      eleCreateDate.html(-1 === create_date_str ? "无" : create_date_str);
      eleExpireDate.html(-1 === expire_date_str ? "无" : expire_date_str);

      if (-1 === expire_hour) {
        eleExpireHour.html("无");
      } else if (0 === expire_hour) {
        eleExpireHour.html("永久");
      } else {
        let expire_day = expire_hour / 24;
        eleExpireHour.html(expire_day + " (天)");
      }

      eleAcMac.html(-1 === mac ? "无" : mac);
      eleAcFlag.html(-1 === flag ? "无" : flag);
      eleAcRemark.html(-1 === remark ? "无" : remark);
    }

    function f_showDongleInfo(dongle_status, dongle_remark) {
      let verifyMsg;
      if (0 === dongle_status) {
        verifyMsg = "<span class='status-badge status-error'>未发现加密锁设备</span>";
      } else if (1 === dongle_status) {
        verifyMsg = "<span class='status-badge status-success'>已授权</span>";
      } else if (2 === dongle_status) {
        verifyMsg = "<span class='status-badge status-warning'>已过期</span>";
      } else if (3 === dongle_status) {
        verifyMsg = "<span class='status-badge status-error'>版本标记不支持</span>";
      } else if (4 === dongle_status) {
        verifyMsg = "<span class='status-badge status-error'>读取失败</span>";
      } else if (5 === dongle_status) {
        verifyMsg = "<span class='status-badge status-error'>增强验证失败</span>";
      } else {
        verifyMsg = "<span class='status-badge status-error'>未知错误</span>";
      }

      eleDongleStatus.html(verifyMsg);
      eleDongleRemark.html(dongle_remark);
    }

    function f_authOpenIndex() {
      ele_top_loading.show();
      $.ajax({
        url: '/auth/openIndex',
        type: "get",
        async: true,
        data: {},
        dataType: "json",
        timeout: 0,
        error: function () {
          ele_top_loading.hide();
        },
        success: function (res) {
          ele_top_loading.hide();

          if (res.code === 1000) {
            let info = res.info;
            eleMachineMac.html(info.machineMac);
            eleAcActiveCode.val(info.acActiveCode);

            f_showDongleInfo(info.dongleStatus, info.dongleRemark);

            let acStatus = parseInt(info["acStatus"]);

            if (acStatus === 1) {
              let create_date_str = info["create_date_str"];
              let expire_date_str = info["expire_date_str"];
              f_showAcInfo(
                acStatus,
                info["acMac"],
                info["acFlag"],
                info["acRemark"],
                parseInt(info["acExpireHour"]),
                create_date_str,
                expire_date_str
              );
            } else {
              f_showAcInfo(-2, -1, -1, -1, -1, -1, -1);
            }
          } else {
            eleMachineMac.html("<span class='status-badge status-error'>程序异常</span>");
            myToast2025(res.msg, "error");
          }
        }
      });
    }

    $("form").submit(function (e) {
      e.preventDefault(); // 阻止默认表单提交
      
      let active_code = eleAcActiveCode.val().trim();
      if (active_code === "") {
        myToast2025("请输入授权码", "error");
        return false;
      }
      
      // 显示loading
      ele_top_loading.show();
      
      // 发起AJAX请求
      $.ajax({
        url: '/auth/openAdd',
        type: "post",
        async: true,
        data: {
          active_code: active_code
        },
        dataType: "json",
        timeout: 0,
        error: function () {
          ele_top_loading.hide();
          myToast2025("网络异常，请确定网络正常！", "error");
        },
        success: function (res) {
          ele_top_loading.hide();
          if (res.code === 1000) {
            myToast2025(res.msg, "success", 1000);
            // 成功后刷新授权信息
            setTimeout(function() {
              f_authOpenIndex();
            }, 1000);
          } else {
            myToast2025(res.msg, "error");
          }
        }
      });
      
      return false;
    });

    $(function () {
      f_authOpenIndex();
    });
  </script>
{% endblock javascripts %}
